<template>
  <div class="indexglobal">

    <n-carousel autoplay>
      <img class="carousel-img" @click="linkurl(item.url)" v-for="(item, index) in carousellist" :key="index"
        :src="item.src">
    </n-carousel>
    <div class="iconcard">
      <div class="iconcardItem" v-for="(item, index) in iconlist" @click="linkurl(item.url)" :key="index">
        <div class="cardimg">
          <img :src="item.src" alt="">
        </div>
        <div class="names">{{ item.name }}</div>
      </div>
    </div>
    <div style="width: 100%;margin-top: 20px;">
      <nuxt-link :to="{
        path: '/next', query: {
          id: item.course_id
        }
      }" style="width: 100%;" v-for="(item, index) in imageAdlist" :key="index">
        <img :src="item.src" alt="" style="width: 100%;">

      </nuxt-link>
      <div class="subtitle">拼团</div>
      <div class="ptlist">
        <div class="ptitem" v-for="item in ptlist">
          <div class="ptimg" style="margin-bottom: 0px;">
            <img :src="item.cover" alt="">
          </div>
          <div class="ptinfo">
            <div class="pttitle">{{ item.title }}</div>
            <div class="price">￥{{ item.price }} <span>￥{{ item.t_price }}</span></div>
          </div>
          <div class="ptstatus">
            <div class="statustext">拼团中</div>
            <div class="daojishi">倒计时：<div>{{ item.days }}</div>天<div>{{ item.hours }}</div>:<div>{{ item.minutes }}
              </div>:
              <div>{{ item.seconds }}</div>
            </div>

          </div>
        </div>
      </div>
      <div class="subtitle">最新列表
        <n-button style="float:right">查看更多</n-button>
      </div>
      <div class="ptlist">
        <div class="ptitem" v-for="item in newlist" style="margin-bottom: 20px;">
          <div class="ptimg" style="margin-bottom: 0px;">
            <img :src="item.cover" alt="">
          </div>
          <div class="ptinfo">
            <div class="pttitle">{{ item.title }}</div>
            <div class="price">￥{{ item.price }} <span>￥{{ item.t_price }}</span></div>
          </div>

        </div>
      </div>
      <div class="subtitle" style="margin-top: 0px !important;">推荐列表
        <n-button style="float:right">查看更多</n-button>
      </div>
      <div class="ptlist">
        <div class="ptitem" v-for="item in tjlist" style="margin-bottom: 20px;">
          <div class="ptimg" style="margin-bottom: 0px;">
            <img :src="item.cover" alt="">
          </div>
          <div class="ptinfo">
            <div class="pttitle">{{ item.title }}</div>
            <div class="price">￥{{ item.price }} <span>￥{{ item.t_price }}</span></div>
          </div>

        </div>
      </div>
    </div>
    <!-- <nuxt-link to="/next">123</nuxt-link> -->
  </div>
</template>
<script setup>
import { NCarousel, NButton } from 'naive-ui';

const all = ref([]);
const carousellist = ref([]);
const iconlist = ref([]);
const imageAdlist = ref([]);
const ptlist = ref([])
const countdownTimer = ref(null);
const tjlist = ref([]);
const newlist = ref([]);
onMounted(() => {

  getdata1();
  getdata2();
})
const getdata1 = async () => {
  console.log("e1")
  const { data } = await useHttp("", "/index");
  console.log(data)
  all.value = data.value;
  all.value.forEach(el => {
    if (el.type == 'swiper') {
      carousellist.value = el.data
    }
    if (el.type == 'icons') {
      iconlist.value = el.data
    }
    if (el.type == 'imageAd') {
      imageAdlist.value = el.data
    }
    if (el.title == '最新列表') {
      newlist.value = el.data
    }
    if (el.title == '推荐列表') {
      tjlist.value = el.data
    }

  })
  console.log(data.value)

}

const getdata2 = async () => {

  const { data } = await useHttp("", "/group/list?page=1&usable=1");
  console.log(data)
  ptlist.value = data.value.rows;
  ptlist.value.forEach(el => {

    console.log(new Date(el.end_time).toDateString())
    el.countdownTimer = setInterval(ptdjs, 1000);
  })
  // countdownTimer.value=setInterval(ptdjs(), 1000);

}
const ptdjs = () => {
  ptlist.value.forEach(el => {
    el.now = new Date();
    el.endDate = new Date(el.end_time);
    el.distance = el.endDate - el.now;
    el.days = Math.floor(el.distance / (1000 * 60 * 60 * 24)) < 10 ? '0' + Math.floor(el.distance / (1000 * 60 * 60 * 24)) : Math.floor(el.distance / (1000 * 60 * 60 * 24));
    el.hours = Math.floor((el.distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) < 10 ? '0' + Math.floor((el.distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) : Math.floor((el.distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    el.minutes = Math.floor((el.distance % (1000 * 60 * 60)) / (1000 * 60)) < 10 ? '0' + Math.floor((el.distance % (1000 * 60 * 60)) / (1000 * 60)) : Math.floor((el.distance % (1000 * 60 * 60)) / (1000 * 60));
    el.seconds = Math.floor((el.distance % (1000 * 60)) / 1000) < 10 ? '0' + Math.floor((el.distance % (1000 * 60)) / 1000) : Math.floor((el.distance % (1000 * 60)) / 1000);

    if (el.distance < 0) {
      clearInterval(el.countdownTimer);
    }
  })
}
const linkurl = (url) => {
  // window.location.href=url
  window.open(url, "_blank")
}

</script>
<style scoped>
.indexglobal {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.carousel-img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.iconcard {
  width: 100%;
  display: flex;
  margin-top: 20px;

}

.iconcardItem {
  width: 24%;
  height: auto;
  margin-right: 20px;
  cursor: pointer;
}

.iconcardItem:last-child {
  margin-right: 0px !important;
}

.ptitem {
  width: 24%;
  height: auto;
  margin-right: 20px;
  border-radius: 10px;
  cursor: pointer;
}

.ptitem:nth-child(4n) {
  margin-right: 0px !important;
}

.ptinfo {
  background: #fff;
  padding: 20px 30px;
  box-sizing: border-box;
}

.cardimg {
  width: 100%;
}

.cardimg img {
  width: 100%;
  border-radius: 5px;
}

.ptimg {
  width: 100%;
  height: 200px;
}

.ptimg img {
  width: 100%;
  height: 200px;

}

.names {
  padding: 20px 0px;
  width: 100%;
  background: #fff;
  text-align: center;

}

.subtitle {
  margin-top: 20px;
  font-size: 20px;
}

.ptlist {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;

}

.pttitle {
  font-size: 15px;
  font-weight: bold;
}

.price {
  font-size: 15px;
  font-weight: bold;
  color: rgba(244, 63, 94, 1);
}

.price span {
  color: rgba(107, 114, 128, 0.7);
  text-decoration-line: line-through;
  font-weight: normal;
  font-size: 12px;
}

.ptstatus {
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(245, 158, 11, 1);
}

.statustext {
  font-size: 12px;
  color: #fff;
}

.daojishi {
  display: flex;
  font-size: 12px;
  color: #fff;
}

.daojishi div {
  padding: 2px 2px;
  border-radius: 2px;
  color: rgba(245, 158, 11, 1) !important;
  background: #fff;
  margin: 0 3px;
  padding: 2px 3px;

}
</style>